<template>
  <el-container style="margin-top: 10px">
    <el-header>
      <el-card style="height: 75px">
        <div style="display: inline-block;margin-left: 20px">
          <el-input v-model="name" placeholder="姓名" size="mini" style="width: 200px" clearable />
          <el-input v-model="phone" placeholder="手机号码" size="mini" style="width: 200px" clearable />
          <el-input v-model="company" placeholder="公司名称" size="mini" style="width: 200px" clearable />
        </div>

        <el-button
          circle
          type="primary"
          icon="el-icon-search"
          @click="searchTeacher"
        />
      </el-card>
    </el-header>

    <el-main>
      <el-card>
        <el-table v-loading="loading" :data="recordList">
          <el-table-column align="center" prop="name" label="姓名" />
          <el-table-column align="center" prop="company" label="公司" />
          <el-table-column align="center" prop="job" label="职务" />
          <el-table-column align="center" prop="phone" label="手机号" />
          <el-table-column align="center" prop="total_num" label="学习卡总次数" />
          <el-table-column align="center" prop="remain_num" label="剩余次数" />
          <el-table-column label="操作" align="center" width="350px">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleUserRecord(scope.row.id)">学习记录</el-button>
              <el-button type="primary" size="mini" icon="el-icon-view" @click="handleGetCardList(scope.row.id)">查看学习卡
              </el-button>
              <el-button
                size="mini"
                type="primary"
                @click="hanldePreview(scope.row.id)"
              >查看记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>

    <el-footer style="height: 85px">
      <el-card>
        <el-pagination
          style="text-align: center;"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-footer>

    <el-dialog title="学习卡列表" :visible.sync="userCardListVisible" width="1300px">
      <el-table :data="userCardList">
        <el-table-column property="type" label="类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? '购买' : scope.row.type == 2 ? '分享' : '平台赠送' }}
          </template>
        </el-table-column>
        <el-table-column property="status" label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? '正常' : scope.row.type == 2 ? '过期' : '已收回' }}
          </template>
        </el-table-column>
        <el-table-column property="total_num" label="学习卡总次数" align="center" />
        <el-table-column property="use_num" label="学习次数" align="center" />
        <el-table-column property="remain_num" label="剩余次数" align="center" />
        <el-table-column property="end_time" label="到期时间" align="center" />
        <el-table-column align="center" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdateCardVisible(scope.row)">修改
            </el-button>
            <el-button type="primary" size="mini" icon="el-icon-view" @click="handleShareRecordList(scope.row.id)">分享记录</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-dialog>

    <el-dialog title="修改学习卡信息" :visible.sync="updateVisible" width="800px">
      <el-form :model="updateData">
        <el-form-item label="学习卡总次数" :label-width="formLabelWidth">
          <el-input v-model="updateData.total_num" placeholder="请输入学习卡总次数" style="width:400px" />
        </el-form-item>
        <el-form-item label="使用次数" :label-width="formLabelWidth">
          <el-input v-model="updateData.use_num" disabled style="width:400px" />
        </el-form-item>
        <el-form-item label="剩余次数" :label-width="formLabelWidth">
          <el-input v-model="updateData.remain_num" disabled style="width:400px" />
        </el-form-item>
        <el-form-item label="到期时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="updateData.end_time"
            style="width:400px"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateUserCard">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="分享记录" :visible.sync="shareCardVisible" width="900px">
      <el-table :data="shareCardData">
        <el-table-column prop="share_person_num" label="设置的分享的人数" align="center"></el-table-column>
        <el-table-column prop="share_study_num" label="设置的分享的学习次数" align="center"></el-table-column>
        <el-table-column prop="remain_person_num" label="剩下的可以分享的人数" align="center"></el-table-column>
        <el-table-column prop="create_time" label="开始时间" align="center"></el-table-column>
        <el-table-column prop="end_time" label="分享过期时间" align="center"></el-table-column>
      </el-table>
    </el-dialog>

  </el-container>

</template>

<script>
import { learningCardUserList, updateUserCard, getUserCardList, shareRecordList } from '@/api/otherAPI.js'

export default {
  data() {
    return {
      disabled: false,
      loading: false,
      query_field: '',
      recordList: [],
      total: 0,
      page: 1,
      pageSize: 10,
      updateVisible: false,
      updateData: {},
      formLabelWidth: '200px',
      userCardList: [],
      userCardListVisible: false,
      name: '',
      phone: '',
      company: '',
      shareCardData: [],
      shareCardVisible: false
    }
  },
  mounted() {
    this.learningCardUserList()
  },
  methods: {
    searchTeacher() {
      this.learningCardUserList()
    },
    learningCardUserList() {
      this.loading = true
      const params = {
        name: this.name,
        page: this.page,
        page_size: this.pageSize,
        phone: this.phone,
        company: this.company
      }
      learningCardUserList(params).then(res => {
        this.recordList = res.data.list
        this.total = res.data.paginate.total
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    handleCurrentChange(e) {
      this.page = e
      this.learningCardUserList()
    },
    hanldePreview(id) {
      this.$router.push({ path: './cardRecord?id=' + id })
    },
    handleUpdateCardVisible(value) {
      this.updateData = value
      this.updateVisible = true
    },
    handleUpdateUserCard() {
      console.log(this.updateData)
      updateUserCard(this.updateData).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.updateVisible = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleGetCardList(userId) {
      console.log(userId)
      getUserCardList({
        user_id: userId
      }).then(res => {
        if (res.code === 200) {
          this.userCardList = res.data
          this.userCardListVisible = true
        }
        console.log(res.data)
      })
    },
    handleUserRecord(userId) {
      this.$router.push({ path: './userRecord?id=' + userId })
    },

    handleShareRecordList(cardId) {
      shareRecordList({ card_id: cardId }).then(res => {
        if (res.code === 200) {
          this.shareCardVisible = true
          this.shareCardData = res.data
        }
      })
    }
  }
}
</script>

<style>
</style>
